import React, { Component } from 'react'
import { Layout, Card, Divider, Select, Table, Button } from 'antd';
import { findAllMyOrderedMeetings, findAllMyJoinedMeetings, findAllMyAllMeetings } from '../api/meeting';
import { Link } from 'react-router-dom';
import MeetingMember from './MeetingMember';

export class MyMeeting extends Component {
  state = {
    meetings: [],
    current: null,
    loading: false,
  }

  render() {
    if (this.state.current) {
      const cm = this.state.meetings.filter(m => m.id === this.state.current)
      return (
        <MeetingMember
          back={() => {
            this.setState({current: null})
            // this.loadMeetings(0).catch(err => {
            //   this.setState({
            //     meetings: [],
            //     loading: false,
            //   })
            // })
          }}
          meeting={cm[0].meeting}
          isClose={cm[0].meeting.endtime < Date.now()}
        />
      )
    }
    return (
      <Layout>
        <Card>
          <Divider orientation="right">
            {/* <Switch unCheckedChildren="我发起的会议" checkedChildren="全部会议" defaultChecked /> */}
            <Select
              defaultValue="全部会议"
              onSelect={(value) => {
                this.loadMeetings(value)
              }}
            >
              <Select.Option key="0">全部会议</Select.Option>
              <Select.Option key="1">我发起的</Select.Option>
              <Select.Option key="2">我加入的</Select.Option>
            </Select>
          </Divider>
          <Table
            loading={this.state.loading}
            dataSource={this.state.meetings}
            columns={columns} />
        </Card>
      </Layout>
    )
  }

  componentDidMount = () => {
    this.loadMeetings(0).catch(err => {
      this.setState({
        meetings: [],
        loading: false,
      })
    })
  }

  loadMeetings = async (type) => {
    this.setState({
      loading: true,
    })
    type = parseInt(type)
    let res
    if (type === 0) {
      res = await findAllMyAllMeetings()
    } else if (type === 1) {
      res = await findAllMyOrderedMeetings()
    } else if (type === 2) {
      res = await findAllMyJoinedMeetings()
    }

    if (!res) {
      this.setState({
        meetings: [],
        loading: false,
      })
      return
    }
    const { data } = res
    if (data.code === 0) {
      this.setState({
        meetings: data.data.map(m => {
          let s = new Date(m.starttime)
          let e = new Date(m.endtime)
          const isMine = m.originator === `${this.props.user.get('id')}`
          return {
            id: m.id,
            key: m.id,
            title: m.theme,
            address: m.room,
            startTime: `${s.getFullYear()}-${s.getMonth() + 1}-${s.getDate()} \
                        ${s.getHours()}:${s.getMinutes()} ~ \
                        ${e.getHours()}:${e.getMinutes()}`,
            originatorName: {
              isMine,
              m: `${m.originatorName}(我)`,
              o: m.originatorName,
            },
            meeting: m,
            state: e <= Date.now() ? '-1' : m.state,
            op: {
              serC: () => {
                this.setState({
                  current: m.id
                })
              },
            }
          }
        }),
        loading: false,
      })
    } else if (data.code === 1) {
      this.setState({
        meetings: [],
        loading: false,
      })
    }
  }
}

const StateMapping = {
  '-1': '已结束',
  0: '正在审核',
  1: '审核通过',
}

const columns = [{
  title: '会议编号',
  dataIndex: 'key',
  key: 'id',
}, {
  title: '会议主题',
  dataIndex: 'title',
  key: 'title',
}, {
  title: '会议地点',
  dataIndex: 'address',
  key: 'address',
}, {
  title: '起止时间',
  dataIndex: 'startTime',
  key: 'startTime',
}, {
  title: '发起人',
  dataIndex: 'originatorName',
  key: 'originatorName',
  render: (obj) => {
    if (obj && obj.isMine) {
      return (
        <span>
          <Link to="/me">{obj.m}</Link>&nbsp;
        </span>
      )
    } else {
      return (<span>{obj.o}</span>)
    }
  }
}, {
  title: '会议状态',
  dataIndex: 'state',
  render: (state) => (
    <span>{StateMapping[state]}</span>
  )
}, {
  title: '操作',
  dataIndex: 'op',
  render: (op) => (
    <Button onClick={op.serC}>详情</Button>
  )
}];

export default MyMeeting
